<template>
  <div class="adv">
    <ul :class="getClass">
      <li v-for="item in list" :key="item.thumb_image">
        <img :src="item.thumb_image" alt="" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "adv",
  props: {
    list: Array,
  },
  data() {
    return {
      advClasses: ["one", "two", "three", "four"],
    };
  },
  computed: {
    getClass() {
      const { advClasses, list } = this;
      return advClasses[list.length - 1];
    },
  },
};
</script>

<style lang="less" scoped>
.adv {
  width: 100%;
  box-sizing: border-box;
  .one {
    height: 200px;
    //   border: #000 solid 1px;
  }
  .two {
    height: 200px;
    display: flex;
    justify-content: space-between;
  }
  .three {
    height: 360px;

    li {
      float: left;
    }
    li:nth-child(1) {
      width: 350px;
      height: 360px;
    }
    li:nth-child(2) {
      width: 400px;
      height: 180px;
    }
    li:nth-child(3) {
      width: 400px;
      height: 180px;
    }
  }
  .four {
    height: 360px;

    li {
      float: left;
    }
    li:nth-child(1) {
      width: 300px;
      height: 360px;
    }
    li:nth-child(2) {
      width: 450px;
      height: 180px;
    }
    li:nth-child(3) {
      width: 225px;
      height: 180px;
    }
    li:nth-child(4) {
      width: 225px;
      height: 180px;
    }
  }
  li {
    list-style: none;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
